import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
    Image,
} from 'antd';

import request, { baseUrl } from '@/utils/request'


const Edit = () => {
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();
    //图片列表
    const [fileList, setFilelist] = useState([])

    // 创建表单实例
    const [myform] = Form.useForm()

    const [dishes, setDishes] = useState({})

    // 获取菜品信息
    const getDishes = async () => {
        const { data } = await request.get('/menu/selID', { params: { dishes_id: id } });

        if (data.code === 200) {
            let newData = data.data;
            console.log(newData);
            if (newData.online === 1) {
                newData.online = true;
            } else if (newData.online === 0) {
                newData.online = false;
            }
            setDishes(newData);
            myform.setFieldsValue(newData);
        }
    }



    useEffect(() => {
        getDishes();
    }, [])

    // 获取分类
    const [category, setCategory] = useState([])
    useEffect(() => {

        request.get('/category').then(({ data }) => {
            setCategory(data.data)
        })

    }, [])

    // 提交修改菜品
    const submit = async ({ dishes_id, ...values }) => {
        //console.log('values', values)

        const newVal = { ...values, dishes_id: dishes_id }

        const { data } = await request.post('/menu/updateDishes', newVal)
        if (data.code === 200) {
            const formData = new FormData()
            formData.set('dishes_id', dishes_id)

            fileList.forEach(item => {
                formData.append('dishes_img', item)
            })
            console.log('formData', formData)

            const { data: uploadData } = await request.post('/menu/upload', formData)
            if (uploadData.code === 200) {
                message.success('菜品修改成功')
                navigate('/manage/goods/list')
            }

        }
    }
    const beforeUpload = (file) => {
        setFilelist([...fileList, file])
        console.log(file);
    }

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={dishes}
                onFinish={submit}

                form={myform}
            >
                <Form.Item name="dishes_id" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="菜品名称" name="dishes_name">
                    <Input />
                </Form.Item>
                <Form.Item label="菜品分类" name='category'>
                    <Select>
                        {
                            category.map(item => (
                                <Select.Option key={item.id} value={item.category}>{item.category}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item label="菜品价格" name='price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品优惠价" name='sales_price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品库存" name='dishes_qty'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="菜品图片" valuePropName="dishes_img">
                    <Upload listType="picture-card" beforeUpload={beforeUpload} fileList={fileList} >
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>Upload</div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="是否上架" name='online' valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}


export default Edit;